// 构建根组件
import { defineComponent, h, computed, ref } from "@vue/runtime-core";
import StartPage from "./page/StartPage";
import GamePage from "./page/GamePage";
import EndPage from "./page/EndPage";
export default defineComponent({
	setup(props, ctx) {
		// 只是普通的值，而不是响应式的值对象 data 中的值
		// 使用 ref() 可以创建响应式的值对象,这样只要改变这个值,就会触发更新视图并渲染
		// const currentPageName = ref("StartPage");
		const currentPageName = ref("GamePage");
		// console.log(currentPageName);
		// 一个依赖别的属性的属性——计算属性
		// 计算属性创建出来的值对象，也是与 ref() 一样的响应式的值对象
		const currentPage = computed(() => {
			// 在 setup 中使用响应式的值对象就需要手动解构
			if (currentPageName.value === "StartPage") {
				return StartPage;
			} else if (currentPageName.value === "GamePage") {
				return GamePage;
			} else if (currentPageName.value === "EndPage") {
				return EndPage;
			}
		});
		const currentMsg = ref("")
		// console.log(currentPage);
		return {
			currentPage,
			currentPageName,
			currentMsg
		}
	},
	render(ctx) {
		// 创建虚拟结点 vnode 正方形 rect
		// const vnode = h("rect");
		// const vnode = h("rect", { x: 100, y: 100 });
		// const vnode = h("rect", { x: 100, y: 100 },"hello world");
		// const vnode = h("rect", { x: 100, y: 100 }, [
		// 	"hello world",
		// 	// h("circle", { x: 150, y: 150 }),
		// 	h(Circle),
		// 	h(Plane)
		// ]);
		// const vnode = h(StartPage);
		const vnode = h("Container", [
			// StartPage 改为使用计算属性
			h(ctx.currentPage, {
				// 固定写法，因为发送端写了 emit("ChangePage",...)
				onChangePage(page,msg) {
					console.log(page,msg);
					// 通过 ctx 上下文来传递参数
					// 为什么此时又不需要 ctx.currentPageName.value 呢？因为自动解构出了 value
					ctx.currentPageName = page;
					ctx.currentMsg = msg;
				},
				msg:ctx.currentMsg
			})
		])
		// console.log(vnode);
		return vnode;
	}
})